<template>
  <div class="z-form-preview">
    <div class="z-form-preview__wrap">
      <div class="z-form-preview__img">
        <el-image
          v-if="isImage"
          :src="src"
          fit="cover"
          :preview-srcList="srcList"
          :initial-index="initialIndex"
          preview-teleported
        ></el-image>
        <div class="other">
          <svg-icon name="form-text"></svg-icon>
        </div>

        <div class="z-form-preview__btn" v-if="!disabled" @click="onClearClick">
          <span>{{ $t('delete') }}</span>
          <svg-icon name="form-delete"></svg-icon>
        </div>
      </div>

      <el-link
        class="z-form-preview__text"
        :href="src"
        :download="fileName"
        :underline="false"
        target="_blank"
      >
        <div class="name">{{ fileName }}</div>
        <div class="type">.{{ type }}</div>
      </el-link>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const $t = (text: string = '', params: AnyObject = {}) => {
  return t(`component.zform.upload.${text}`, params)
}

defineProps<{
  type: string
  src?: string
  srcList?: string[]
  disabled?: boolean
  isImage?: boolean
  fileName: string
  initialIndex?: number
}>()

const emits = defineEmits<{
  close: []
}>()

const onClearClick = () => {
  emits('close')
}
</script>

<style lang="scss">
.z-form-preview {
  $size: 64px;
  margin: 16px 16px 0;
  display: inline-block;
  user-select: none;

  &__wrap {
    width: $size;
  }
  &__img {
    width: $size;
    height: $size;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
  }
  .other {
    color: var(--z-text-color-light);
    display: flex;
    font-size: 24px;
    align-items: center;
    padding-bottom: 16px;
    justify-content: center;
    background-color: var(--z-fill-color-extra);
  }

  .other,
  .el-image {
    width: 100%;
    height: 100%;
  }

  &__btn {
    color: #fff;
    width: 100%;
    bottom: 0;
    height: 18px;
    cursor: pointer;
    display: flex;
    position: absolute;
    font-size: 10px;
    align-items: center;
    border-radius: 3px 3px 0 0;
    justify-content: center;
    background-color: rgba($color: #000000, $alpha: 0.5);
    &:hover {
      opacity: 0.85;
    }
    &:active {
      opacity: 0.7;
    }
    svg {
      margin-left: 2px;
    }
  }

  &__text {
    width: 100%;
    color: var(--z-text-color-primary);
    display: flex;
    overflow: hidden;
    font-size: 12px;
    margin-top: 6px;
    line-height: 16px;
    white-space: nowrap;
    justify-content: left;
    .el-link__inner {
      width: 100%;
      overflow: hidden;
    }
    .name {
      flex: 1 1 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
